<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;

        }
        td,th{
            padding: 8px 16px;
            border: 1px solid black;
            text-align: center;
        }
        thead {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<h2 class="price-count"></h2>
<script>
    const books = [
        {
            id: 1,
            name: '《算法导论》',
            date: '2006-09',
            price: 85.00,
            count: 3
        },
        {
            id: 2,
            name: '《UNIX编程艺术》',
            date: '2006-02',
            price: 59.00,
            count: 2
        },
        {
            id: 3,
            name: '《编程珠玑》',
            date: '2008-10',
            price: 39.00,
            count: 5
        },
        {
            id: 4,
            name: '《代码大全》',
            date: '2006-03',
            price: 128.00,
            count: 8
        },
    ]
    const tbodyEl = document.querySelector('tbody')
    const priceCountEl = document.querySelector('.price-count')
    for(const item of books){
        const trowEl = document.createElement("tr")
        for(let key in item){
            const tdEl = document.createElement('td')
            if(key === 'price'){
                tdEl.textContent= '￥'+item[key]
            }else{
                tdEl.textContent=item[key]
            }
            trowEl.append(tdEl)
        }
        const btnEl = document.createElement('button')
        btnEl.textContent='删除'
        const deleteTd = document.createElement('td')
        deleteTd .append(btnEl)
        trowEl.append(deleteTd)
        tbodyEl.append(trowEl)
        /*删除按钮的点击*/
        btnEl.addEventListener('click',(event)=>{
            /*删除对应tr*/
            const trEl = event.currentTarget.parentElement.parentElement
            trEl.remove()
            /*删除books对应的数据*/
            /*sectionRowIndex可以拿到tr在table中的索引*/
            books.splice(trEl.sectionRowIndex,1)
            /*重新计算价格*/
            computedPrice()
        })
    }

    /*计算总价格*/
    const computedPrice = ()=>{
        let priceTotal=books.reduce((preValue,item)=>{
            return preValue+item.price*item.count
        },0)
        priceCountEl.textContent=`总价格：￥${priceTotal}`
    }
    computedPrice()


</script>
</body>
</html>